<template>
	<div class="collectionAblum scrollbar size" id="style-2">
		<div class="header">
			<p class="title">全部关注</p>
		</div>
		<ul class="userlist">
			<li v-for="user in allData">
				<div class="userhead fl">
					<img :src="$store.state.baseHttp+ user.userCoverPath" alt="">
				</div>
				<div class="usermessage">
					<p>{{user.userName}}</p>
					<p><span>获赞 0</span><span>粉丝 0</span></p>
				</div>
				<div class="cancelFollow" @click="cancelFollow(user.followId)">
					<i class="iconfont iconrenwu"></i>
					取消关注
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				allData: []
			}
		},
		created() {
			this.getdata()
		},
		activated() {
			this.getdata()
		},
		methods: {
			// 获取数据
			getdata() {
				this.$http.get('/api/user/' + this.$store.state.toUserId + '/follows').then((res) => {
					let Ddata = this.$shareClass.Duserfollow(res.data)
					this.allData = Ddata
					console.log(Ddata)
				})
			},
			//用户信息页
			toUser(ablum) {
				console.log(ablum)
				//录入目标用户信息
				this.$store.commit('updataUserId', ablum.userId)
				this.$router.push('/userMessage')
			},
			//取消关注
			cancelFollow(followId) {
				this.$confirm('此操作将取消关注该用户, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.delete('/api/user/follow/'+followId).then(res=>{
						this.$message({
							type: 'success',
							message: '取消关注成功!'
						});
						this.getdata()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消操作！'
					});
				});
			}
		}
	}
</script>

<style scoped="scoped">
	.cancelFollow {
		font-size: 14px;
		vertical-align: middle;
		line-height: 30px;
		width: 100px;
		text-align: center;
		cursor: pointer;

		height: 30px;
		position: absolute;
		right: 20px;
		border-radius: 5px;
		top: 50%;
		transform: translateY(-50%);
		background-color: #e5e9ef;
	}

	.cancelFollow:hover {
		color: #00a1d6;
	}

	.usermessage {
		float: left;
		margin-left: 30px;
	}

	.usermessage p {
		font-size: 20px;
	}

	.usermessage span {
		font-size: 14px;
		margin-right: 10px;
		color: #b4b4b4;
	}

	.userlist li {
		position: relative;
		overflow: hidden;
		height: 100px;
		border-bottom: solid 1px #ebeef2;
		padding-top: 20px;
		box-sizing: border-box;
	}

	.header {
		height: 60px;
		line-height: 60px;
		border-bottom: 1px solid #ebeef2;
	}

	.title {
		font-size: 20px;
	}

	.userhead img {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		border: #e4dfdf solid 2px;
		background-color: #e4dfdf;
	}

	.collectionAblum {
		padding-left: 20px;
		width: 100%;
		height: 95%;
		background-color: #fff;
	}

	.size {
		min-height: 85%;
		min-width: 99%;
	}
</style>
